import React from 'react';
import {
    View,
    Text,
    StyleSheet
} from 'react-native';
import RNSlider from 'react-native-slider';
import { Global } from '../util/constants';
import { scaleSize } from '../util/size';


interface IProps {
    value: number,
    type: string, // buy | sell
    backThumbLeftColor?: string,  // 滑块左边的背景色
    backThumbRightColor?: string,   // 滑块右边的背景色
    onChangeSlider?: (type: string, value: number) => void,
    step?: number,
    size?: number, // 背景原点的大小
    minimumTrackTintColor?: string,
    maximumTrackTintColor?: string,
    thumbBackGroundColor?: string,
    thumbborderColor?: string
}

interface IState{
    value: number,
    buyBackThumbColors: Array<string>,
    sellBackThumbColors: Array<string>,
    backThumbColors: Array<string>,
}

const defaultLeftColor = Global.buyColor;
const defaultRightColor = Global.grayColor;

const defaultProps = {
    step: 50,
    backThumbLeftColor: defaultLeftColor,
    backThumbRightColor: defaultRightColor,
    size: scaleSize(11),
    minimumTrackTintColor: defaultLeftColor,
    maximumTrackTintColor: defaultRightColor,
    thumbBackGroundColor: defaultLeftColor,
    thumbborderColor: 'white'
}

class NccSlider extends React.Component<IProps, IState> {

    constructor(props) {
        super(props);
        
        this.state = {
            value: this.props.value,
            backThumbColors: this.initBackThumbColor(this.props),
            buyBackThumbColors: this.initBackThumbColor(this.props), // 背景的圆点的颜色
            sellBackThumbColors: this.initBackThumbColor(this.props)
        }
    }

    componentDidMount () {
        console.log('now render ------------ ', this.props.type);
    }

    shouldComponentUpdate (nextProps) {
        // 减少重复的渲染。
        // console.log('shouldComponentUpdate',nextProps, this.props.value, nextProps.value, this.props.type, nextProps.type);
        if (this.props.value == nextProps.value && this.props.type == nextProps.type) {
            return false;
        }
        this.updateBackThumbColors(nextProps);
        return true;
    }

    initBackThumbColor = (props: any) => {
        // console.log('initBackThumbColor', type, value);
        let backThumbColors:Array<string> = [];
        let {
            backThumbLeftColor = defaultProps.backThumbLeftColor,
            backThumbRightColor = defaultProps.backThumbRightColor,
            step = defaultProps.step,
            value,
        } = props;

        
        let leftIndex = Math.floor(value / 50); //value / step;
        let totalIndex = 3; //100 / step + 1;

        for (let i = 0 ; i <= leftIndex; i ++) {
            backThumbColors[i] = backThumbLeftColor;
        }
        for (let i = leftIndex + 1; i < totalIndex; i ++) {
            backThumbColors[i] = backThumbRightColor;
        }
        console.log('initBackThumbColor========', backThumbColors);
        return backThumbColors;


    }


    // // 改变背景的圆点 颜色
    updateBackThumbColors = (props: any) => {
        const {
            step = defaultProps.step, 
            backThumbLeftColor = defaultProps.backThumbLeftColor,
            backThumbRightColor = defaultProps.backThumbRightColor,
            value
        } = props;
        // if (value % step == 0) {

        // }
        const {backThumbColors} = this.state;
        // backThumbColors = 
        // 这里限制只有3
        let leftIndex = Math.floor(value / 50); //Number(value) / step;

        console.log('updateBackThumbColors', backThumbColors, leftIndex);
        
        for (let i = 0; i <= leftIndex; i ++) {
            backThumbColors[i] = backThumbLeftColor;
        }
        for (let i = leftIndex + 1; i < backThumbColors.length; i++) {
            backThumbColors[i] = backThumbRightColor;
        }
        console.log('update after....', backThumbColors);
        this.setState({backThumbColors: backThumbColors});
    }

    /**
     * type 选择类型 buy | sell
     * value 回调的值
     */
    onChangeSlider = (type: string, value:number) => {
        console.log('onChangeSlider===============================', type, value);
        if (value === this.state.value) {
            return;
        }
        if(this.props.onChangeSlider) {
            this.props.onChangeSlider(type, value);
        }

        const {
            step = defaultProps.step
        } = this.props;

        if (value % step === 0) {
            this.updateBackThumbColors({value})
        }
        this.setState({value: value})
    }

    renderBackThumb = () => {
        const {size = defaultProps.size} = this.props;
        const {backThumbColors} = this.state;
        // console.log('renderBackThumb---------', backThumbColors);
        // return (
        //     <View style={{display: 'flex', flexDirection: 'row', alignItems: 'baseline', marginTop: -(25.5), marginBottom: 10, justifyContent: 'space-between'}}>
        //         {
        //             backThumbColors.map((v, index) => {
        //                 return <View style={{width: size, borderRadius: size, height: size, backgroundColor: v}} key={`backThumb-${index}`}></View>
        //             })
        //         }
        //     </View>
        // )
        // backThumbColors = backThumbColors
        return (
            <View style={{display: 'flex', flexDirection: 'row', alignItems: 'baseline', marginTop: -(25.5), marginBottom: 10, justifyContent: 'space-between'}}>
                {
                    backThumbColors.map((v, index) => {
                        return <View style={{width: size, borderRadius: size, height: size, backgroundColor: v}} key={`backThumb-${index}`}></View>
                    })
                }
            </View>
        )
    }

    render() {
        const {size = defaultProps.size, type} = this.props;
        let thumbBackGroundColor = this.props.thumbBackGroundColor || defaultProps.thumbBackGroundColor
        return (
            <View style={{
                flex: 1,
                // marginLeft: 10,
                // marginRight: 10,
                alignItems: "stretch",
                justifyContent: "center"
            }}>
                <RNSlider
                style={{
                    zIndex: 40
                }}
                minimumValue={0}
                maximumValue={100}
                step={this.props.step || defaultProps.step}
                value={this.props.value}
                // animationConfig={
                //     {duration: 300}
                // }
                // 滑块长度的css
                trackStyle={{
                    height: 1,
                    // borderRadius: size/2
                }}
                // 圆点的style
                thumbStyle={{
                    width: size + 6,
                    height: size + 6,
                    borderRadius: (size + 6)/ 2,
                    backgroundColor: thumbBackGroundColor,
                    borderColor: 'white',
                    borderWidth: 3,
                    shadowOffset: {width: 1, height: 1},
                    shadowColor: 'rgba(147,147,147,0.65)'
                }}
                minimumTrackTintColor={thumbBackGroundColor}
                maximumTrackTintColor={'#ECECEC'}
                // debugTouchArea={true}
                animateTransitions={false}
                onValueChange={value => {
                    this.onChangeSlider(type, value)
                }}
                />

                {
                    this.renderBackThumb()
                }

                <View style={{
                    display: 'flex', flexDirection: 'row', 
                    justifyContent: 'space-between',
                    marginTop: scaleSize(-6),
                    paddingLeft: scaleSize(1),
                    paddingRight: scaleSize(1)
                }}>
                    <Text style={styles.sliderTip}>0</Text>
                    <Text style={[styles.sliderTip,
                        {marginLeft: 30}]
                    }>50%</Text>
                    <Text style={styles.sliderTip}>100%</Text>
                </View>
            </View>
        )
    }
}

export default NccSlider;

const styles = StyleSheet.create({
    sliderTip: {
        fontFamily: 'Helvetica',
        fontSize: scaleSize(9),
        color: '#C6C6C6',
    }
})


// db.getCollection('users.extension').aggregate([
//     {
//         $match: {
//             mobile: {$exists: 1},
//             shipAddress: {$exists: 1},
//         }
//     },
//     {
//         $project: {
//             shipAddress: 1,
//             mobile: 1,
//             deposit: 1
//         }
//     }
// ])